<template>
  <div class="securitySetting">
    <div class="settingList">
      <div class="set">
        <span>请假</span>
        <span>
          <el-switch
            v-model="levelData.enable"
            active-color="#13ce66"
            :inactive-color="inactiveColor"
            @change="handleChange(levelData,$event)"
          />
        </span>
        <i class="el-icon-setting" @click="setFlow('regular')" />
      </div>
      <div class="set">
        <span>加班</span>
        <span>
          <el-switch
            v-model="overtimeData.enable"
            active-color="#13ce66"
            :inactive-color="inactiveColor"
            @change="handleChange(overtimeData,$event)"
          />
        </span>
        <i class="el-icon-setting" @click="setFlow('regular')" />
      </div>
      <div class="set">
        <span>离职</span>
        <span>
          <el-switch
            v-model="dimissionData.enable"
            active-color="#13ce66"
            :inactive-color="inactiveColor"
            @change="handleChange(dimissionData,$event)"
          />
        </span>
        <i class="el-icon-setting" @click="setFlow('regular')" />
      </div>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span style="text-align:center">
        <el-upload
          class="upload-demo"
          drag
          action="/api/user/process/deploy"
          :headers="myheader"
          :before-upload="beforeUpload"
          :on-error="uploadFail"
          :on-success="handleFileSuccess"
          :show-file-list="false"
          :file-list="fileList"
        >
          <i class="el-icon-upload" />
          <div class="el-upload__text">将文件拖到此处</div>
        </el-upload>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  saveSetState,
  getFlowList,
  suspend
} from '@/api/approval'
import { getToken } from '@/utils/auth'
export default {
  name: 'UsersTableIndex',
  components: {},
  data() {
    return {
      requestData: {},
      activeColor: '#13ce66',
      inactiveColor: '#ccc',
      dialogVisible: false,
      processing: false,
      uploadTip: '点击上传',
      fileList: [],
      dataBase: [],
      levelData: {
        enable: false
      },
      overtimeData: {
        enable: false
      },
      dimissionData: {
        enable: false
      }
    }
  },
  computed: {
    myheader: function() {
      return {
        Authorization: `Bearer ${getToken()}`
      }
    }
  },
  created() {
    this.getFlowList()
  },
  methods: {
    async getFlowList() {
      const data = await getFlowList()
      data.map(item => {
        const items = {
          ...item,
          enable: item.persistentState.suspensionState !== 2
        }
        if (items.key === 'process_leave') {
          this.levelData = items
        } else if (items.key === 'process_dimission') {
          this.dimissionData = items
        } else {
          this.overtimeData = items
        }
      })
    },
    handleChange(obj, e) {
      if (!obj.key) {
        this.$message.error('还未上传流程')
        return
      }
      var parent = {
        processKey: obj.key,
        enable: e
      }
      suspend(parent)
    },
    async changeSet() {
      await saveSetState(this.requestData)
      this.$message.success('设置保存成功！')
    },
    setFlow(obj) {
      this.dialogVisible = true
    },
    // 文件上传完成
    typeTip(obj) {
      this.$message.error(obj)
    },
    beforeUpload(file, obj) {
      // importFilexml(file, obj, this.typeTip)
    },
    // 上传错误
    uploadFail(err, file, fileList) {
      this.uploadTip = '点击上传'
      this.processing = false
      this.$message.error(err)
    },
    // 上传成功
    handleFileSuccess(obj, file, fileList) {
      this.uploadTip = '点击上传'
      this.processing = false
      this.dialogImportVisible = false
      if (obj.code === 99999) {
        this.$message.error('导入失败' + '!')
      } else {
        this.$message.success('导入成功' + '!')
        this.$router.back(-1)
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "./../../styles/variables";
$active: #13ce66;
$inactive: #ccc;
.securitySetting {
  padding: 20px;
  background: #fff;
  border-radius: 3px;
  margin: 15px;
  border: 1px solid #ebeef5;
  .settingList {
    margin-bottom: 20px;
    .title {
      font-weight: bold;
      line-height: 40px;
      margin-bottom: 20px;
      border-bottom: solid 1px #ccc;
    }
    .set {
      border: solid 1px #ccc;
      border-radius: 3px;
      padding: 15px 30px 15px 20px;
      position: relative;
      display: inline-block;
      margin-right: 20px;
      span:first-child {
        padding-right: 15px;
        border-right: solid 1px #ccc;
        margin-right: 15px;
      }
      .el-icon-setting {
        position: absolute;
        right: 5px;
        top: 5px;
        color: #999;
      }
    }
  }
}
</style>
